<template>
  <div>
    <!-- 位置栏 -->
    <div class="location-bar">
      <div>位置 :&ensp;</div>
      <div>一级页面</div>
      <div style="color: #000">/二级页面</div>
    </div>
    <!-- 查询框 -->
    <div class="search-bar">
      <a-form-model layout="inline" :model="searchForm" @submit="searchSubmit" @submit.native.prevent>
        <a-form-model-item label="所属栏目">
          <a-select show-search placeholder="请选择" style="width: 150px" v-model="searchForm.id">
            <a-select-option v-for="(col, index) in column" :key="index" :value="col.id">
              {{ col.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="栏目名称:">
          <a-input v-model="searchForm.name" placeholder="请输入" />
        </a-form-model-item>
        <a-form-model-item label="创建日期:">
          <a-range-picker valueFormat="yyyy-MM-DD HH:mm:ss" v-model="searchForm.dateRange" />
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" html-type="submit">查询</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <!-- 内容框 -->
    <div class="content-box">
      <!-- 新增 -->
      <a-button type="primary" @click="add_modal"> 新增 </a-button>
      <!-- 表格 -->
      <a-table :columns="columns" :data-source="data" @change="handleTableChange" :pagination="pagination" :row-key="(record) => record.id">
        <span slot="isRecommend" slot-scope="text, record">
          <a-switch default-checked @change="recommendChange(record)" :checked="text" />
        </span>
        <span slot="status" slot-scope="text, record">
          <a-switch default-checked @change="stateChange(record)" :checked="text === '启用' ? true : false" />
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="modify_modal(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="del(record)"> 删除 </a>
        </span>
      </a-table>
      <!-- 弹窗编辑表单 -->
      <!-- 新增表单 -->
      <a-modal :visible="add_visible" title="新增栏目" okText="确认" cancel-text="取消" @ok="add_ok" @cancel="add_cancel">
        <a-form :form="addform" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
          <a-form-item label="栏目名称">
            <a-input v-decorator="['title', { rules: [{ required: true, message: '请输入栏目名称!' }] }]" />
          </a-form-item>
          <a-form-item label="所属栏目">
            <a-select show-search placeholder="请选择" v-decorator="['parentId', { rules: [{ required: true, message: '请输入栏目名称!' }] }]">
              <a-select-option v-for="(col, index) in column" :key="index" :value="col.id">
                {{ col.title }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="是否推荐">
            <a-radio-group v-decorator="['isRecommend', { rules: [{ required: true, message: '请输选择!' }] }]">
              <a-radio value="true">是</a-radio>
              <a-radio value="false">否</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="状态">
            <a-radio-group v-decorator="['status', { rules: [{ required: true, message: '请输选择!' }] }]">
              <a-radio value="启用">启用</a-radio>
              <a-radio value="禁用">禁用</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-form>
      </a-modal>
      <!-- 修改 -->
      <a-modal :visible="modal_visible" title="修改用户" okText="确认" cancel-text="取消" @ok="modal_ok" @cancel="modal_cancel">
        <a-form :form="modalform" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
          <a-form-item label="栏目名称">
            <a-input v-decorator="['title', { initialValue: modal_message.title, rules: [{ required: true, message: '请输入名称!' }] }]" />
          </a-form-item>
          <a-form-item label="所属栏目">
            <a-select show-search v-decorator="['parentId', { initialValue: modal_message.parentId, rules: [{ required: true, message: '请输入栏目名称!' }] }]">
              <a-select-option v-for="(col, index) in column" :key="index" :value="col.id">
                {{ col.title }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="是否推荐">
            <a-radio-group v-decorator="['isRecommend', { initialValue: modal_message.isRecommend, rules: [{ required: true, message: '请输入栏目名称!' }] }]">
              <a-radio :value="true">是</a-radio>
              <a-radio :value="false">否</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="状态">
            <a-radio-group v-decorator="['status', { initialValue: modal_message.status, rules: [{ required: true, message: '请输入栏目名称!' }] }]">
              <a-radio value="启用">启用</a-radio>
              <a-radio value="禁用">禁用</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>

<script>
/**表头信息 */
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
    scopedSlots: { customRender: 'id' },
  },
  {
    title: '所属栏目',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '栏目名称',
    dataIndex: 'title',
    key: 'title_',
    scopedSlots: { customRender: 'title_' },
  },
  {
    title: '是否推荐',
    key: 'isRecommend',
    dataIndex: 'isRecommend',
    scopedSlots: { customRender: 'isRecommend' },
  },
  {
    title: '状态',
    key: 'status',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '创建时间',
    key: 'created',
    dataIndex: 'created',
    scopedSlots: { customRender: 'created' },
  },
  {
    title: '操作',
    key: 'action',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
  },
];
export default {
  beforeCreate() {
    //创建表单
    this.addform = this.$form.createForm(this, { name: 'addform' });
    this.modalform = this.$form.createForm(this, { name: 'modalform' });
  },
  data() {
    return {
      columns,
      data: [],
      column: [], //一级栏目
      searchForm: { dateRange: ['', ''], name: '', id: undefined }, //查询参数
      pagination: { pageSize: 10, total: 100, pageNum: 1, showSizeChanger: true }, //分页参数
      add_visible: false,
      add_form: {}, //新增提交内容
      modal_visible: false,
      modal_message: {}, //被编辑信息
      modal_form: {}, //编辑提交内容
      del_id: '',
    };
  },
  created() {
    this.getColumn();
    this.loadArticleList();
  },
  methods: {
    //读取一级栏目
    async getColumn() {
      let reqData = {};
      let getListUrl = `/section/list`;
      let result = await this.axios.get(getListUrl, reqData);
      this.column = result.data.data;
      // console.log(this.column);
    },
    //读取文章列表
    async loadArticleList() {
      let reqData = { sectionParentsId: this.searchForm.id, startTime: this.searchForm.dateRange[0], endTime: this.searchForm.dateRange[1], title: this.searchForm.name };
      let reqParam = { pageNumber: this.pagination.pageNum, pageSize: this.pagination.pageSize };
      let searchUrl = `/section/search/${reqParam.pageNumber}/${reqParam.pageSize}`;
      let result = await this.axios.post(searchUrl, reqData);
      // console.log(result);
      this.data = result.data.data;
      this.pagination.total = result.data.total; //总数
      // console.log(this.data);
      this.search_empty();
    },
    //新增接口
    async newlyAdded() {
      let reqData = { isRecommend: this.add_form.isRecommend, title: this.add_form.title, parentId: this.add_form.parentId, status: this.add_form.status };
      let saveUrl = `/section/save`;
      let result = await this.axios.post(saveUrl, reqData);
      console.log(result);
      this.loadArticleList();
      this.addform.resetFields();
    },
    //修改接口
    async modifyList() {
      let reqData = { isRecommend: this.modal_form.isRecommend, id: this.modal_form.id, title: this.modal_form.title, parentId: this.modal_form.parentId, status: this.modal_form.status };
      let updateUrl = `/section/update`;
      let result = await this.axios.post(updateUrl, reqData);
      console.log(result);
      this.loadArticleList();
      this.modalform.resetFields();
    },
    //删除接口
    async deleteList() {
      let reqData = {};
      let reqParam = { id: this.del_id };
      let deleteUrl = `/section/delete/${reqParam.id}`;
      let result = await this.axios.delete(deleteUrl, reqData);
      console.log(result);
      this.loadArticleList();
    },
    // handleSearch(value) {
    //   this.searchForm.id = value;
    // },
    //搜索
    searchSubmit() {
      // console.log(this.searchForm);
      this.loadArticleList();
    },
    //新增弹窗
    add_modal() {
      this.add_visible = true;
    },
    add_cancel() {
      this.addform.resetFields();
      this.add_visible = false;
    },
    add_ok() {
      const form = this.addform;
      form.validateFields((err, values) => {
        if (err) {
          return;
        }
        this.add_form = values;
        console.log(this.add_form);
        this.add_visible = false;
        this.newlyAdded();
      });
    },
    //编辑弹窗
    modify_modal(record) {
      this.modal_message = JSON.parse(JSON.stringify(record));
      // console.log(this.modal_message)
      this.modal_visible = true;
    },
    modal_cancel() {
      this.modalform.resetFields();
      this.modal_visible = false;
    },
    modal_ok() {
      const form = this.modalform;
      form.validateFields((err, values) => {
        if (err) {
          return;
        }
        // console.log(values)
        this.modal_form = values;
        this.modal_form.id = this.modal_message.id;
        this.modal_visible = false;
        this.modifyList();
      });
    },
    del(record) {
      this.del_id = record.id;
      this.deleteList();
    },
    //推荐开关
    recommendChange(record) {
      record.isRecommend = !record.isRecommend;
      this.modal_form = record;
      // console.log(this.modal_form);
      this.modifyList();
    },
    //状态开关
    stateChange(record) {
      if (record.status == '启用') {
        record.status = '禁用';
      } else {
        record.status = '启用';
      }
      this.modal_form = record;
      // console.log(this.modal_form);
      this.modifyList();
    },
    //分页
    handleTableChange(pagination) {
      this.pagination.pageNum = pagination.current;
      this.loadArticleList();
    },
    //清空搜索
    search_empty() {
      this.searchForm.dateRange = ['', ''];
      this.searchForm.name = '';
      this.searchForm.id = '';
    },
  },
};
</script>

<style>
.location-bar {
  display: flex;
  font-size: 14px;
  color: #88898b;
}
.search-bar {
  width: 100%;
  height: 80px;
  background-color: #ffffff;
  margin-top: 17px;
  box-sizing: border-box;
  padding: 20px 30px;
}
.content-box {
  width: 100%;
  background-color: #ffffff;
  margin-top: 20px;
  box-sizing: border-box;
  padding: 20px 30px;
}
</style>